<template>
  <div>
    <a-form
      class="w-[60%] mx-auto"
      :label-col="{
        span: 9,
      }"
      :model="form.store"
      v-if="form"
      :rules="rules"
      ref="formRef"
    >
      <a-form-item :label="t('Data connection')">
        <a-radio-group>
          <a-radio checked>{{ t('Incremental connection') }}</a-radio>
        </a-radio-group>
      </a-form-item>

      <a-form-item :label="t('Back-end address')" required name="sunlux">
        <a-input v-model:value="form.store.sunlux" allow-clear></a-input>
      </a-form-item>

      <a-form-item :label="t('Store account')" name="username">
        <a-input allow-clear v-model:value="form.store.username"></a-input>
      </a-form-item>

      <a-form-item :label="t('Store password')" name="password">
        <a-button-group>
          <a-input allow-clear v-model:value="form.store.password"></a-input>
          <a-button
            type="primary"
            :disabled="!form.store.password || !form.store.username"
            @click="check"
            :loading="loading"
          >
            {{ t('Check') }}
          </a-button>
        </a-button-group>
      </a-form-item>

      <a-form-item>
        <a-row>
          <a-col :offset="5">
            <a-button-group>
              <a-button @click="onPrev">{{ t('Previous step') }}</a-button>
              <a-button @click="onNext" :disabled="!allowSubmit">{{ t('Finished') }}</a-button>
            </a-button-group>
          </a-col>
        </a-row>
      </a-form-item>
    </a-form>

    <a-modal v-model:open="finished" :footer="false" centered>
      <a-result status="success">
        <template #extra>
          <a-button @click="back">{{ t('Back') }}</a-button>
        </template>
      </a-result>
    </a-modal>
  </div>
</template>

<script setup lang="ts">
import { accountConfig, getToken } from '@/api/modules';
import { message, type FormInstance } from 'ant-design-vue';
import type { Rule } from 'ant-design-vue/es/form';
import type { DataConnectionForm } from '../types';

const { t } = useI18n();

const finished = ref(false);

const step = defineModel<number>('step');

const loading = ref(false);

const form = defineModel<DataConnectionForm>('form');

const allowSubmit = ref(false);

const formRef = ref<FormInstance>();

const rules: Partial<Record<keyof DataConnectionForm['store'], Rule[]>> = {
  sunlux: [{ required: true }],
  username: [{ required: true }],
  password: [{ required: true }],
};

const check = async () => {
  if (form.value) {
    try {
      loading.value = true;
      const { data } = await getToken(form.value.store);
      allowSubmit.value = data.data;
      message.info(data.msg);
    } catch (error) {
    } finally {
      loading.value = false;
    }
  }
};

const onPrev = () => {
  step.value!--;
};

const back = () => {
  window.location.reload();
};
const onNext = async () => {
  try {
    await formRef.value?.validate();
    if (form.value) {
      await accountConfig(form.value.store);
      finished.value = true;
    }
  } catch (error) {}
};
</script>

<style lang="scss" scoped></style>
